<nz-card nzType="inner" nzTitle="Setting" [nzExtra]="settingExtraTemplate">
    <nz-card nzType="inner" nzTitle="Global">
        <div nz-row>
            <div nz-col nzSpan="12">Dark Mode</div>
            <div nz-col nzSpan="12">
                <nz-switch [(ngModel)]="setting.global.darkMode" (ngModelChange)="darkModeChanged()"></nz-switch>
            </div>
        </div>
    </nz-card>
    <br/>
    <nz-card nzType="inner" nzTitle="Terminal">
        <div nz-row>
            <div nz-col nzSpan="12">Allow right click to copy and paste selected</div>
            <div nz-col nzSpan="12">
                <nz-switch [(ngModel)]="setting.terminal.rightCopy"></nz-switch>
            </div>
        </div>
        <div nz-row>
            <div nz-col nzSpan="12">Confirm before close</div>
            <div nz-col nzSpan="12">
                <nz-switch [(ngModel)]="setting.terminal.closeConfirm"></nz-switch>
            </div>
        </div>
        <nz-divider></nz-divider>
        <div nz-row>
            <div nz-col nzSpan="16">
                <div nz-row>
                    <div nz-col nzSpan="18">Foreground Color</div>
                    <div nz-col nzSpan="6">
                        <input [(colorPicker)]="setting.terminal.foreground" [cpPresetColors]="foregroundPresetColors" readonly [ngStyle]="{'width':'50px', 'background-color':setting.terminal.foreground, 'border':'none','cursor':'pointer'}" />
                    </div>
                </div>
                <div nz-row>
                    <div nz-col nzSpan="18">Background Color</div>
                    <div nz-col nzSpan="6">
                        <input [(colorPicker)]="setting.terminal.background" [cpPresetColors]="backgroundPresetColors" readonly [ngStyle]="{'width':'50px', 'background-color':setting.terminal.background, 'border':'none','cursor':'pointer'}" />
                    </div>
                </div>
                <div nz-row>
                    <div nz-col nzSpan="18">Font</div>
                    <div nz-col nzSpan="6">
                        <div nz-dropdown nzTrigger='click' [nzDropdownMenu]="font" [ngStyle]="{'font-family':setting.terminal.fontFamily}">
                            {{setting.terminal.fontFamily}}
                        </div>
                        <nz-dropdown-menu #font="nzDropdownMenu">
                            <ul nz-menu nzSelectable>
                                <li nz-menu-item *ngFor='let font of fontList;' (click)='changeFont(font)'>
                                    <div [ngStyle]="{'font-family':font}">{{font}}</div>
                                </li>
                            </ul>
                        </nz-dropdown-menu>
                    </div>
                </div>
                <div nz-row>
                    <div nz-col nzSpan="18">Font Size</div>
                    <div nz-col nzSpan="6">
                        <nz-input-number [(ngModel)]="setting.terminal.fontSize" [nzSize]="'small'" [nzMin]="9" [nzMax]="20" [nzStep]="1"></nz-input-number>
                    </div>
                </div>
                <div nz-row>
                    <div nz-col nzSpan="18">Bold</div>
                    <div nz-col nzSpan="6">
                        <nz-switch [(ngModel)]="setting.terminal.fontBold"></nz-switch>
                    </div>
                </div>
            </div>
            <div nz-col nzSpan="8" [ngStyle]="{'color':setting.terminal.foreground, padding:'16px', 'background-color':setting.terminal.background, 'font-family':setting.terminal.fontFamily, 'font-size':setting.terminal.fontSize+'px', 'font-weight':setting.terminal.fontBold?'bold':'normal'}">
                <div>This is the Demo!</div>
                <div>This is the Demo!</div>
                <div>This is the Demo!</div>
            </div>
        </div>
    </nz-card>
    <ng-template #settingExtraTemplate>
        <button nz-button nzType='primary' (click)='saveSetting()'><i nz-icon nzType='save'></i>Save</button>
    </ng-template>
</nz-card>